<template>
	<view class="home">
		<view class="tab_box">
			<view class="">
				<u-icon name="arrow-left" color="#fff" size="23" @click="iconFn"></u-icon>
			</view>
			<view class="example-body" @click="tabboxFn">
				年度：{{selectionTime}}
			</view>
		</view>

		<!-- 分段器 -->
		<view class="content">
			<!-- 雨量计信息 -->
			<view class="">
				<!-- 表格 -->
				<view class="table_box">
					<wyb-table ref="table" :headers="headers" :contents="contents" :font-size="fontSize"
						:value-format="valueFormat" border-color="#000000" content-bg-color="#ff8080"
						content-ft-color="#314761" height="1200rpx" :loading="loading" loader-bg-color="rgba(0,0,0,0.1)"
						loader-color="#fff" loader-size="100"/>
				</view>
			</view>
		</view>
		<!-- 年份 -->
		<u-picker :show="showyears" :columns="columnsyears" @confirm="changeTimeFn" @cancel="cancelTimeFn"></u-picker>
	</view>
</template>

<script>
	import wybTable from '@/components/wyb-table/wyb-table.vue'
	import dayjs from '@/common/dayjs.min.js';
	import yuliangzhan from '@/components/yuLiangZhan.vue';
	export default {
		components: {
			yuliangzhan,
			wybTable
		},
		data() {
			return {
				selectionTime: '',
				showyears: false,
				columnsyears: [
					['2025', '2026', '2027', '2028', '2029', '2030']
				],
				dataList: [],
				loading: false,
				totalPag: 0,
				pageSize: 50,
				fontSize: [40],
				datetimerange: [],
				titleStyle: {
					color: '#ffffff',
					fontSize: '40rpx'
				},
				navbarIF: true,
				userImage: '#546374',
				titleData: '雨量站信息',
				obYLZ: [],
				activeStyle: {
					color: '#67fff3'
				},
				inactiveStyle: {
					color: '#c2c2c2'
				},
				deviceName: '',
				productKey: '',
				beginReportingTime: '',
				endReportingTime: '',
				optionData: {},
				headers: [{
					label: '雨量站',
					key: 'name',
					width: 300
				},{
					label: '日期',
					key: 'measuringTime',
					width: 300
				},{
					label: '降雨量',
					key: 'rainFall',

					width: 150
				}],
				valueFormat: [
					{
						type: 'smaller',
						range: 10000,
						key: 'name', //分钟
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'measuringTime', //小时
						style: {
							color: '#ffffff',
							bgColor: '#eaa42b'
						}
					},
					{
						type: 'smaller',
						range: 10000,
						key: 'rainFall', //雨强
						style: {
							color: '#ffffff',
							bgColor: '#33a17d'
						}
					}
				],
				contents: [],
				historyID: '',
				typeNUB:0

			}
		},
		onLoad(option) {
			// 默认历史
			let now = dayjs();
			this.selectionTime = now.format('YYYY')
			this.historyID = option.id
			this.type = option.type
		},
		onShow() {
			this.tabularData()
		},
		methods: {
			// 选择时间
			changeTimeFn(e) {
				console.log('e', e.value[0]);
				this.selectionTime = e.value[0]
				this.tabularData()
				this.showyears = false
			},
			cancelTimeFn() {
				this.showyears = false
			},
			tabboxFn() {
				this.showyears = true
			},
			iconFn() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 表格数据
			tabularData() {
				uni.$u.http.get('/api/device/device/getDailyRainFallStatisticsList', {
					params: {
						"id": this.historyID * 1,
						"year": this.selectionTime,
						"type": this.type,
					}
				}).then(res => {
					console.log('res', res);
					this.contents = res.rows
				}).catch(err => {
					console.log('错误', err);
					uni.showToast({
						title: '网络错误',
						duration: 1500
					})
				})
			},
			// 随机数 雨量districtListHYETAL
			getRandomNumber(min, max) {
				return Math.floor(Math.random() * (max - min + 1)) + min;
			}

		},
	}
</script>
<style scoped lang="scss">
	.scroll-Y {
		max-height: 1000rpx;
	}

	.home {
		.tab_box {
			padding: 80rpx 20rpx 10rpx 20rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.example-body {
				width: 400rpx;
				padding: 10rpx;
				margin: 0 20rpx;
				color: #ffffff;
				border-radius: 30rpx;
				font-size: 35rpx;
				text-align: center;
				background-color: #314761;
			}
		}

		min-height: 100vh;
		background-color: #4c6d95;

		.content {
			.con_bom {
				// color: #ffffff;
				margin: 30rpx;
				padding: 30rpx;
				border-radius: 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.text_y {
					font-size: 50rpx;
					text-align: center;
					color: #67fff3;
				}

				.status_box {
					padding: 0 40rpx 40rpx 40rpx;
					border-radius: 20rpx;



					.dev_status {
						font-size: 40rpx;
						padding: 20rpx 0;
						border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
						display: flex;
						align-items: center;
						justify-content: space-between;

					}

					.danwei {
						margin-left: 20rpx;
						font-size: 35rpx;
					}
				}

				.realtime {
					padding: 10rpx;
					background-color: #67fff3;
					font-size: 30rpx;
					color: #000000;
					border-radius: 100rpx;
					margin-top: 20rpx;
					text-align: center;
				}

				.realtimeACT {
					background-color: #4fc5bb;
				}

			}

			// 每日雨量
			.rainfallToday {
				border-radius: 30rpx;
				margin: 30rpx 30rpx 0rpx 30rpx;
				padding: 30rpx 30rpx 80rpx 30rpx;
				background-color: rgba(0, 0, 0, 0.1);

				.rainfallToday_i {
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);

					.rainfallToday_a {
						color: #ffffff;
						font-size: 40rpx;
					}

					.rainfallToday_b {
						font-size: 50rpx;
						color: #67fff3;
					}
				}
			}

			.table_box {
				margin-top: 10rpx;
				// background-color: #4fc5bb;
			}
			.hyetal_box {
				margin-top: 30rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				color: #ffffff;
				.hyetal_a {
					padding: 20rpx;
					margin: 20rpx;
					border-radius: 20rpx;
					font-size: 40rpx;
					background-color: #6390c3;
				}
				.acvhyetal_a {
					background-color: #8f897e;
					color: #ffffff;
				}
			}
		}
	}
</style>
<style>
	/* 引入字体图标 */
	@import url("/static/fonts/icons/qweather-icons.css");
</style>
<style>
	page {
		background-color: #7a7d81;
	}
</style>